import { createSlice } from "@reduxjs/toolkit";
import { ThemeReducerProps } from "./index.types";
const initialState = {
  sidebarFixed: true,
  sidebarFooter: true,
  sidebarShadow: true,
  sidebarStyle: "app-sidebar--light",
  sidebarToggleMobile: false,
  sidebarToggle: false,
  sidebarUserbox: true,
  // Header

  headerFixed: true,
  headerShadow: true,
  headerBgTransparent: true,
  headerDrawerToggle: false,

  // Main content

  contentBackground: "",
  themeConfiguratorToggle: true,

  // Footer

  footerFixed: false,
  footerShadow: false,
  footerBgTransparent: true,

  // Page title

  pageTitleStyle: "",
  pageTitleBackground: "",
  pageTitleShadow: false,
  pageTitleIconBox: true,
  pageTitleDescription: true,

  palletType: "light",
} as ThemeReducerProps;

const themeSlice = createSlice({
  name: "theme",
  initialState,
  reducers: {
    setSidebarShadow: (state: ThemeReducerProps, action) => {
      state.sidebarShadow = action.payload;
    },
    setSidebarFixed: (state, action) => {
      state.sidebarFixed = action.payload;
    },
    setSidebarStyle: (state, action) => {
      state.sidebarStyle = action.payload;
    },
    setSidebarFooter: (state, action) => {
      state.sidebarFooter = action.payload;
    },
    setSidebarToggleMobile: (state, action) => {
      state.sidebarToggleMobile = action.payload;
    },
    setSidebarToggle: (state, action) => {
      state.sidebarToggle = action.payload;
    },
    setSidebarUserbox: (state, action) => {
      state.sidebarUserbox = action.payload;
    },
    setHeaderFixed: (state, action) => {
      state.headerFixed = action.payload;
    },
    setHeaderShadow: (state, action) => {
      state.headerShadow = action.payload;
    },
    setHeaderBgTransparent: (state, action) => {
      state.headerBgTransparent = action.payload;
    },
    setHeaderDraweToggle: (state, action) => {
      state.headerDrawerToggle = action.payload;
    },
    setPalletTheme: (state, action) => {
      state.palletType = action.payload;
    },
  },
});

export const {
  setSidebarShadow,
  setSidebarFixed,
  setSidebarStyle,
  setSidebarFooter,
  setSidebarToggleMobile,
  setSidebarToggle,
  setSidebarUserbox,
  setHeaderFixed,
  setHeaderShadow,
  setHeaderBgTransparent,
  setHeaderDraweToggle,
  setPalletTheme,
} = themeSlice.actions;
export default themeSlice.reducer;
